<template>
	<view>
		
		<van-goods-action>
		  <van-goods-action-icon icon="chat-o" text="客服" />
		  <van-goods-action-icon icon="cart-o" text="购物车" @click="gecc" info="5" />
		  <van-goods-action-icon icon="shop-o" text="店铺" />
		  <van-goods-action-button color="#be99ff" text="加入购物车"  type="warning" />
		  <van-goods-action-button color="#7232dd" text="立即购买" @click="showPopup" />
		</van-goods-action>
		<van-popup
		  :show="show"
		  position="bottom"
		  custom-style="height: 45%;"
		  closeable
		  @close="onClose"
		>
		<van-card
		  :price="lst.goods_price"
		  desc="描述信息"
		  :title="lst.goods_name"
		  :thumb="lst.goods_big_logo"
		/>
		<van-cell title="购买数量" >
		  <view >
		    <van-stepper v-model="bumn" @change="change"/>
		  </view>
		</van-cell>
		<van-button class="jiatu" block color="#7232dd" @click="add">加入购物车</van-button>
		</van-popup>
	</view>
</template>

<script>
	const app=getApp()
	import http from "../../http/http.js"
	export default {
		data() {
			return {
				lst:{},
				show:false,
				bumn:1,
				
			}
		},
		methods: {
			gecc(){
				
				wx.switchTab({url:"/pages/gwc/gwc"})
			},
			async xiang(id){
				let{data:res}= await http.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id='+id)
				this.lst=res.message
			},
			 showPopup() {
			    this.show=true
			  },
			
			  onClose() {
			    this.show=false 
				
			  },
			  add(){
				  var cart=wx.getStorageSync('wee')||[]
				  var index=cart.findIndex(item=>{
					  return item.id==this.lst.goods_id
				  })
				  // console.log(index);
				  if(index==-1){
					  var obj={id:this.lst.goods_id ,name:this.lst.goods_name,price:this.lst.goods_price,bumn:this.bumn,flag:true,img:this.lst.goods_small_logo}
					  cart.push(obj)
				  }else{
					  cart[index].bumn+=this.bumn
				  }
				  wx.setStorageSync('wee',cart)
				  this.show=false
				  this.bumn=1
			  },
			  change(e){
				  // console.log(e);
				  this.bumn=e.detail
			  }
		},
		onLoad(opsi) {
			var id=opsi.id
			this.xiang(id)
			// app.globalData.key
		}
	}
</script>

<style>
.jiatu{
	width: 100%;
	position: absolute;
	bottom:0;
}
</style>
